<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title id="title-meta"></title>
    <link rel="stylesheet" th:href="@{/css/normalize.css}">
    <link rel="stylesheet" th:href="@{/css/nowChart.css}">
    <style>
        .gongkuang > div {
            width: 100%;
            margin-left: 0px;
            margin-top: 10px;
        }

        .gongkuang > div > div {
            width: 90%;
            margin-left: 0px;
        }

        .gongkuang > div > img {
            margin-right: 0px;
            margin-left: 0px;
        }

        /*.gongkuang::-webkit-scrollbar {*/
        /*display: none;!*隐藏滚动条*!*/
        /*}*/
        /*.gongkuang { -ms-overflow-style: none; }*/
        /*.gongkuang { overflow: -moz-scrollbars-none; }*/
    </style>
</head>
<body>
<div class="bottom">
    <div class="bottom_left" style="width: 65%;height: 100%" id="tupu">
        <div class="bottom_left_title">
            知识图谱图
        </div>
        <!--        知识图谱开始-->
        <div style="position: relative;width: 100%;height: 100%;min-height: 450px;margin-left: -25px" id="knowChart">
            <div id="loadingDiv" style="position: absolute;top:50%;left:50%">
                <img style="width: 30px;height: 30px;" th:src="@{img2/loadding.gif}" alt="">
            </div>
        </div>
        <!--        知识图谱结束-->
    </div>
    <div class="bottom_right" style="width: 35%;margin-left: 0px">
        <div class="bottom_right_top" style="width: 100%;overflow: hidden">
            <div class="bottom_right_top_title">策略建议</div>
            <div style="position: relative;overflow: hidden;width: 100%;height: 70%;">
                <div class="gongkuang" style="width: 100%;height: 100%;overflow-y:scroll ;padding-right:17px;position: absolute;right:-17px"></div>
            </div>
        </div>
        <div class="bottom_right_bottom" style="height: 30%">
            <div>
                <div class="bottom_right_bottom_title" style="float: left">策略库</div>
                <div class="bottom_right_bottom_title" style="width: 200px;float:left">写字楼工况模式</div>
            </div>
            <div class="bottom_computer">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <img th:src="@{/img2/computer.png}" alt="">
                <!--                <img src="img2/computer.png" alt="">-->
                <div style="color:#fff;float: right">......</div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/js/jquery-1.9.1.min.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<!--<script th:src="@{/js/time.js}"></script>-->
<script th:src="@{/layer/layer.js}"></script>
<script th:src="@{/js/jquery.blockUI.js}"></script>
<script th:src="@{/js/tools.js}"></script>
<script>
    let getNumParam = val=>{return isNumber(val)?val:""}
    var mychart;
    $(function () {
        // 获取标题栏title
        $.ajax({
            type: "GET",
            url: "/multipower/title/get/name",
            dataType: "json",
            async: true,
            success: function (data) {
                if (data.error == undefined) {
                    $("#title-meta").html(data.title+"大楼")
                }
            }
        })

        var totalHeight = $(window).height();
        console.log('body高度:' + document.body.style.height);
        $('body').height(totalHeight);
        $('.bottom').height(totalHeight);
        $('.bottom_right').height(totalHeight);
        $('#knowChart').height(totalHeight - 52);
        mychart = echarts.init(document.getElementById("knowChart"));
        // chartssize(document.getElementById("tupu"),document.getElementById("knowChart"));
        getNodeAndLine();
    })

    //高度计算
    // console.log("高度为:"+getComputedStyle(document.getElementsByClassName('bottom')[0],'height').height);
    // mychart.getDom().style.height =getComputedStyle(document.getElementsByClassName('bottom')[0],'height').height;
    // mychart.resize();
    // mychart.style.height=totalHeight-52+'px';

    function getNodeAndLine() {
        $.ajax({
            type: "GET",
            url: "/multipower/strategyJL/getViewAtlas?date=" + getNumParam(getPathParamAferSlashLast()),
            dataType: "json",
            async: false,
            success: function (data) {
                console.log(1);
                console.log(data.node); //获取所有的节点
                console.log(data.edge); //获取所有的边
                var node = data.node;
                var edge = data.edge;
                var nodeLength = data.node.length; // 节点的长度
                var edgeLength = data.edge.length; // 边的长度
                console.log(nodeLength);
                console.log(edgeLength);
                var nodeObject = { //节点对象
                    "name": "设备",
                    desc: "8", //描述，对应节点的id
                    "value": [200, 80], //节点的坐标
                    symbolSize: [60, 80],
                    selected: true,
                    // symbol:'image://http://134.175.123.16:8088/b852723e-b20b-41ef-96a4-a572b248c4c4.png',
                    // symbol:'none'
                    symbol: 'circle',
                    itemStyle: {
                        color: '#fff'
                    }
                };
                line_direction_option.series[0].data = node.map(function (item, index) {
                    return {
                        name: item.deviceName, //设备名称
                        desc: item.deviceId.toString(), // 设备id
                        value: item.coordinate, //设备坐标
                        symbol: (item.picPath == null) ? 'circle' : "image://" + item.picPath, //设备图片
                        symbolSize: [60, 60], //节点的大小
                        selected: true,
                        itemStyle: {
                            color: '#fff'
                        }
                    }
                })
                line_direction_option.series[1].data = edge.map(function (item) {
                    return {
                        name: "", //边标签上显示的文字
                        coords: item.line, //边的坐标
                        desc: item.desc, //边的描述，例如:3#10,3为起始节点id，10为终止节点id
                        effect: {
                            show: false,
                            trailLength: 0,
                            symbolSize: [30, 30],
                            symbol: 'none'
                            // symbol:'none'
                            // symbol:'image://img/sun.png'
                        },
                    }
                })
                $.ajax({
                    type: "GET",
                    url: "/multipower/strategy/gen?date="+getNumParam(getPathParamAferSlashLast()),
                    dataType: "json",
                    async: true,
                    beforeSend: function () {
                        // $.blockUI();//请求之前打开
                        $.blockUI({
                            message: '<h1>请等待...</h1>'
                        });
                    },
                    success: function (data) {
                            $.unblockUI(); //返回关闭
                            var edgeHigh1 = data.path; //高亮边
                            console.log('edgeHigh1' + edgeHigh1)
                            var path2 = 'image://img/littlesun.png';
                            console.log(data);
                            if (data.path != undefined && data.path.length > 0
                                && data.node != undefined && data.node.length > 0
                                && data.strategyOutput != undefined && data.strategyOutput.length > 0) { //运行成功
                                var nodeHigh = []; //保存高亮节点数组
                                var edgeHigh = []; //保存高亮边数组
                                var nodeHigh1 = data.node;
                                var arr = data.strategyOutput; //工况数组
                                //动态生成工况开始
                                var gongkuang1 = document.getElementsByClassName("gongkuang")[0];
                                gongkuang1.innerHTML = '';
                                for (var i = 0; i < arr.length; i++) { //动态表里工况数组，成功工况
                                    var newdiv = document.createElement("div");
                                    var newimg = document.createElement("img");
                                    newimg.setAttribute("src", "/multipower/img2/computer.png");
                                    newdiv.appendChild(newimg);
                                    var newdiv1 = document.createElement("div");
                                    var newspan = document.createElement("span");
                                    newspan.innerHTML = arr[i].infoTime + "&emsp;&emsp;&nbsp" + arr[i].infoContent;
                                    newdiv.appendChild(newspan);
                                    newdiv.appendChild(newdiv1);
                                    var gongkuang = document.getElementsByClassName("gongkuang")[0];
                                    gongkuang.appendChild(newdiv);
                                    // console.log(arr[i]);
                                }
                                //遍历节点对象，将对象转为数组。
                                for (var index1 = 0; index1 < nodeHigh1.length; index1++) {
                                    nodeHigh.push(nodeHigh1[index1]);
                                }
                                //遍历边对象，将对象转为数组。
                                for (var index2 = 0; index2 < edgeHigh1.length; index2++) {
                                    edgeHigh.push(edgeHigh1[index2]);
                                }
                                console.log("data=" + nodeHigh);
                                console.log("data=" + edgeHigh);
                                console.log(typeof nodeHigh);
                                console.log(typeof edgeHigh);
                                console.log(data.rc);
                                console.log(typeof data.rc);
                                for (var i = 0; i < nodeLength; i++) { //节点高亮
                                    for (var j = 0; j < nodeHigh.length; j++) {
                                        console.log(node[i].deviceId);
                                        if (nodeHigh[j] == node[i].deviceId) {
                                            //如果id相同则通过id查询高亮图片，高亮。
                                            $.ajax({
                                                type: "GET",
                                                url: "/multipower/strategyJL/getHighlightPic/" + node[i].deviceId,
                                                dataType: "json",
                                                async: false,
                                                success: function (data) {
                                                    line_direction_option.series[0].data[i].symbol = "image://" + data.highlight;
                                                }
                                            })
                                        }
                                    }
                                }
                                for (var i = 0; i < edgeLength; i++) { //边高亮
                                    for (var j = 0; j < edgeHigh.length; j++) {
                                        /*console.log(node[i].deviceId);*/
                                        if (edgeHigh[j] == edge[i].desc) { //如果关系名称相同则边高亮。
                                            // line_direction_option.series[1].data[i].effect.symbol="image://"+edge[i].icon;
                                            line_direction_option.series[1].data[i].effect.symbol = "image://" + edge[i].energyPic;
                                        }
                                    }
                                }

                                $("#loadingDiv").parent().remove();
                                mychart.setOption(line_direction_option);

                            } else {


                                mychart.setOption(line_direction_option);
                                layer.alert('没有预测数据/策略', {
                                    icon: 5,
                                    title: "提示"
                                });
                                return false;
                            }
                        },
                    error: function (data) {
                        $.unblockUI(); //返回关闭
                            mychart.setOption(line_direction_option);
                            layer.alert('策略生成异常，请稍后再试！', {
                                icon: 5,
                                title: "提示"
                            });
                    }
                })
            },
        })
    }

    var line_direction_option = {
        title: {  //标题
            // text: '夏季能源知识图谱',
            left: '-5',
            top: '10px',
            textStyle: {
                color: '#ffffff',
                fontFamily: '微软雅黑',
                fontWeight: 'lighter',
                fontSize: 16
            },
        },
        // // 提示框的配置
        // tooltip: {
        //     trigger: 'item',
        //     formatter:"名称:{b0}" +"<br>"+
        //     "坐标值:"+"["+"{c0}"+"]",
        // },

        xAxis: {  //X轴的设置
            type: 'value',
            boundaryGap: false,
            show: false
        },
        yAxis: { //Y轴的设置
            type: 'value',
            show: false,
            inverse: true,
        },
        series: [{   //节点
            type: 'graph',
            layout: 'none',
            // silent: true,          //不响应鼠标事件
            coordinateSystem: 'cartesian2d',
            symbolSize: 20,
            showEffectOn: 'render',
            zlevel: 2,
            rippleEffect: {
                period: 3, //波纹秒数
                brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
                scale: 10 //波纹范围
            },
            hoverAnimation: true,
            label: {
                normal: {
                    show: true,
                    position: 'bottom',//设置label显示的位置
                    // formatter: '{c}',//设置label读取的值为value
                    textStyle: {
                        fontSize: '16'
                    },
                }
            },
            data: []
        },

            {
                type: 'lines',
                symbol: ['none', 'arrow'],
                symbolSize: 10,
                coordinateSystem: 'cartesian2d',
                label: {
                    show: true,
                    position: 'middle',
                    fontSize: 16,
                    color: '#fff',
                },
                lineStyle: {
                    normal: {
                        // color: '#fff',
                        color: '#fff',

                        width: 3,
                        opacity: 0.5,
                        curveness: 0,

                    }
                },
                effect: {
                    show: true,
                    // smooth: false,
                    trailLength: 0,
                    symbol: "none", // ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’
                    // color: '#507577',
                    symbolSize: 50,
                    // symbol:planePath,
                    // symbol:'none'
                },
                data: [],
            }
        ],
    }
    window.addEventListener("resize", function () {
        //窗口大小的自适应
        var changeHeigth = $(window).height();
        $('body').height(changeHeigth);
        $('.bottom').height(changeHeigth);
        $('.bottom_right').height(changeHeigth);
        $('#knowChart').height(changeHeigth - 52);
        mychart.resize();
    });
</script>
</body>
</html>